<template>
  <div ref="myDiv" class="line-echarts" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv)

    myChart.setOption({
      grid: { // 控制图标在盒子的位置
        left: '0%',
        right: '20%',
        bottom: '20%',
        top: '5%',
        containLabel: true // gid区域是否包含坐标轴的刻度标签
      },
      textStyle: {
        color: '#008acd'
      },
      tooltip: {
        show: true,
        formatter: '{b0}<br />试题数量: {c0}',
        backgroundColor: '#989898',
        textStyle: {
          color: '#fff'
        },
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#008acd'
          }
        }
      },

      xAxis: {
        axisTick: { show: false },
        type: 'category',
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ]
      },
      yAxis: {
        type: 'value',
        axisLine: { show: true },
        splitArea: {
          show: true
        }
      },
      series: [
        {
          data: [
            200, 192, 120, 144, 160, 130, 140.105, 160, 165, 100,
            120
          ],

          type: 'line',
          smooth: true
        }
      ]
    })
  }
}
</script>

<style>
.line-echarts {
    width: 56.25rem;
    height: 21.875rem;
}
</style>
